<template>
  <div class="app-container home content">
    <el-row style="height: 47%;" :gutter="20">
      <el-col :span="9" style="height: 100%;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-badge :value="toolTotal" :max="99" class="item" style="margin-right: 26px;">
              <span class="badge-text"  @click="handleChangeTotal(1)" :style="currentIndex == 1 ? 'color: #1890ff' : ''">待办</span>
            </el-badge>
            <el-badge :value="copyTotal" :max="99" class="item" style="margin-right: 26px;">
              <span class="badge-text" @click="handleChangeTotal(2)" :style="currentIndex == 2 ? 'color: #1890ff' : ''">待阅</span>
            </el-badge>
          </div>
          <div class="text item tool-list">
            <div v-show="currentIndex == 1">
              <homeTool @total="getToolListTotal" ref="homeTool" v-show="toolTotal" />
              <el-empty description="暂无数据" v-show="!toolTotal"></el-empty>
            </div>
            <div v-show="currentIndex == 2">
              <homeCopy @copyTotal="getCopyListTotal" v-show="copyTotal" />
              <el-empty description="暂无数据" v-show="!copyTotal"></el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>添加任务</span>
          </div>
          <div class="task-card">
            <div class="add-task">
              <el-input placeholder='添加任务到“收集箱"，回车即可创建' class="add-input" v-model="taskVal"
                @keyup.enter.native="enterAddTask">
                <template slot="append">
                  <em style="font-style: normal;font-size: 12px;" v-if="taskDate.length">{{
      taskDate[0].slice(5) +
      '-' +
      taskDate[1].slice(5) }}</em>
                  <em :style="{ color: getColor() }" v-show="priorityText != '无优先级'"
                    style="font-style: normal;font-size: 12px;">{{ priorityText }}</em>
                  <i class="el-input__icon el-icon-date" @click="dateCardShow = !dateCardShow"></i>
                </template>
              </el-input>
            </div>
            <div class="task-card-list">
              <div class="item" v-for="(item, i) in taskList" :key="i" @click="handleClickTaskItem(item, i)"
                :class="taskItemCurrent == item.id ? 'active' : ''">
                <div style="width: calc(100% - 162px);display: flex;align-items: center;">
                  <span style="width: 16px;display: inline-block;padding-left: 0;">
                    <i class="el-icon-tickets" style="font-size: 13px;"
                      :style="{ color: getBgColor(item.priorityLevel) }" v-if="item.jobWorkSubList"></i>
                  </span>
                  <el-checkbox style="margin-bottom: 0;" v-model="item.checked"
                    :style="{ '--fill-color': getBgColor(item.priorityLevel) }"
                    @change="editTaskState(item.id, 3)"></el-checkbox>
                  <span class="task-name">{{ item.mainTask }}</span>
                </div>
                <div style="display: flex;min-width: 162px; align-items: center;justify-content: space-between;"
                  :style="item.startTime && item.endTime ? '' : 'justify-content: flex-end;'">
                  <span class="date" :style="item.isOver ? 'color:red;' : ''" v-if="item.startTime && item.endTime">{{
      item.newStartTime.replace('-', '.') }}-{{
      item.newEtartTime.replace('-', '.') }}</span>
                  <div style="display: flex;align-items: center;">
                    <el-tooltip class="item" effect="dark" :content="`指派人：${item.createByName}`" placement="top">
                      <i class="el-icon-user-solid" style="color: #757575;" v-if="createBy != item.createBy"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="`配合人：${item.teamUpNameStr}`" placement="top"
                      v-if="createBy == item.createBy && item.teamUpNameStr.length">
                      <i class="el-icon-user-solid" style="color:#757575"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="`指派人：${item.assignNameStr}`" placement="top"
                      v-if="createBy == item.createBy && item.assignNameStr.length">
                      <i class="el-icon-user-solid" style="color:#757575"></i>
                    </el-tooltip>
                    <el-progress style="margin-right: 6px;" define-back-color="#DCDFE6" type="circle"
                      v-if="item.jobWorkSubList && item.jobWorkSubList.length" :percentage="item.ratio" :width="15"
                      :show-text="false" color="#C0C4CC"></el-progress>
                    <i class="el-icon-delete" @click.stop="handleDelTask(item)" v-if="createBy == item.createBy"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <el-card class="box-card details-card-body">
          <div slot="header" class="clearfix">
            <span>任务详情</span>
          </div>
          <div class="text item" style="height: 100%">
            <div class="rt-top" v-if="taskList.length">
              <div style="float: left;position: relative;">
                <i class="el-icon-more" style="cursor: pointer;" @click="showEditPop = !showEditPop"></i>
              </div>
              <i class="el-icon-s-flag" :style="{ color: getBgColor(currentData.priorityLevel || 4) }"
                @click="flagShow = !flagShow"></i>
              <div class="flag-list" v-if="flagShow">
                <div class="flag-item"
                  :style="currentData.createBy != createBy ? 'cursor: not-allowed;' : 'cursor:pointer'"
                  v-for="(item, i) in flagList" :key="i" @click="handleEditLevel(item, i)"
                  :class="(currentData.priorityLevel || 4) == item.level ? 'flag-active' : ''">
                  <i class="el-icon-s-flag" :style="{ color: item.color }"></i><span class="flag-label">{{
      item.text }}</span>
                  <i class="el-icon-check" v-if="(currentData.priorityLevel || 4) == item.level"></i>
                </div>
              </div>
            </div>
            <div class="rt-details" v-if="taskList.length">
              <div class="rt-top-title">
                <el-input type="textarea" :autosize="{ minRows: 1 }" style="width: 100%;padding: 0;border: none;"
                  resize="none" :disabled="createBy != currentData.createBy" v-model="currentData.mainTask"
                  @blur="enterEditTaskLabel"></el-input>
                <i class="el-icon-s-fold" v-if="!showTaskDetails" @click="handleshowChildDetails"></i>
                <i class="el-icon-s-operation" v-if="showTaskDetails" @click="handleShowChildTaskList"></i>
              </div>
              <div class="task-details" v-if="showTaskDetails" style="margin-top: 6px;">
                <el-input type="textarea" placeholder="请输入内容"
                  :disabled="createBy != currentData.createBy || currentData.state == 3" v-model="textarea"
                  show-word-limit :autosize="{ minRows: 1 }" resize="none"
                  :style="{ fontFamily: '黑体', width: 100 + '%', fontSize: 14 + 'px', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }">
                  ></el-input>
              </div>
              <div v-if="!showTaskDetails && currentData.jobWorkSubList && currentData.jobWorkSubList.length"
                class="child-task-list">
                <div class="child-task-item" v-for="(item, i) in currentData.jobWorkSubList" :key="i">
                  <div>
                    <el-checkbox style="margin-bottom: 0;" v-model="item.checked"
                      @change="handleFinishChildTask(item)"></el-checkbox>
                    <span class="label">{{ item.subTask }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="height: 47%;" :gutter="20">
      <el-col :span="9" style="height: 100%;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>常用流程</span>
          </div>
          <div class="flow-path">
            <div class="flow-path-item" v-for="(item, i) in flowList" :key="i" @click="flowClick(item)">
              <div class="flow-path-item-icon">
                <i class="el-icon-s-order"></i>
              </div>
              <div class="flow-path-item-label">{{ item.name }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>常用系统</span>
          </div>
          <div class="card-system">
            <div class="system-item" v-for="o in 6" :key="o">
              <div class="system-item-icon">
                <i class="el-icon-s-marketing"></i>
              </div>
              <div class="system-item-label">营销统计</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <el-card class="box-card know-card-body">
          <div slot="header" class="clearfix">
            <span>知识库动态</span>
          </div>
          <div class="card-know">
            <div class="card-know-item" v-for="(item, i) in knowList" :key="i" @click="goKnowDetail(item)">
              <div class="lf">
                <i class="el-icon-reading"></i>
              </div>
              <div class="rt">
                <div class="title">
                  <span class="label">文章标题：</span>
                  <span class="text">{{ item.groupName }}</span>
                </div>
                <div class="date">
                  <span class="label">创建时间：</span>
                  <span class="text">{{ item.createTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="dateCardShow" width="30%" center :close-on-click-modal="false">
      <div class="date-card">
        <div class="date-time user">
          <span class="label"><i class="el-icon-date"></i>日期：</span>
          <el-date-picker v-model="taskDate" type="daterange" range-separator="至" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="priority user">
          <span class="label"><i class="el-icon-sort"></i>优先级</span>
          <div style="width: calc(100% - 90px);">
            <span class="flag-bg" v-for="(item, i) in flagList" :key="i" :class="priorityCurrent == i ? 'active' : ''"
              @click="handleSelectPriority(item, i, 'add')">
              <i class="el-icon-s-flag" :style="{ color: item.color }"></i>
            </span>
            <em :style="{ color: getColor() }">{{ priorityText }}</em>
          </div>
        </div>
        <div class="cooperate user"><span class="label"><i class="el-icon-user-solid"></i>配合人</span>
          <el-select v-model="user1" placeholder="请选择" :multiple="true" style="width: calc(100% - 90px);">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId + ''">
            </el-option>
          </el-select>
        </div>
        <div class="assign user"><span class="label"><i class="el-icon-user"></i>指派人</span>
          <el-select v-model="user2" placeholder="请选择" :multiple="true" style="width: calc(100% - 90px);">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId + ''">
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClearForm">清 除</el-button>
        <el-button type="primary" @click="handleConfirmBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="showEditPop" width="30%" center :close-on-click-modal="false">
      <div class="date-card">
        <div class="date-time user">
          <span class="label"><i class="el-icon-date"></i>日期：</span>
          <el-date-picker :disabled="createBy != currentData.createBy || currentData.status == 3" v-model="editTaskDate"
            type="daterange" range-separator="至" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="priority user">
          <span class="label"><i class="el-icon-sort"></i>优先级</span>
          <div style="width: calc(100% - 90px);">
            <span class="flag-bg" v-for="(item, i) in flagList" :key="i"
              :style="currentData.createBy != createBy || currentData.status == 3 ? 'cursor: not-allowed;' : 'cursor:pointer'"
              :class="currentData.priorityLevel == item.level ? 'active' : ''"
              @click="handleSelectPriority(item, i, 'edit')">
              <i class="el-icon-s-flag" :style="{ color: item.color }"></i>
            </span>
            <em :style="{ color: getBgColor(currentData.priorityLevel) }">{{
      getLevelText(currentData.priorityLevel)
    }}</em>
          </div>
        </div>
        <div class="cooperate user"><span class="label"><i class="el-icon-user-solid"></i>配合人</span>
          <el-select :disabled="createBy != currentData.createBy || currentData.status == 3"
            v-model="currentData.teamUpIdStr" placeholder="请选择" :multiple="true" style="width: calc(100% - 90px);">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId + ''">
            </el-option>
          </el-select>
        </div>
        <div class="assign user"><span class="label"><i class="el-icon-user"></i>指派人</span>
          <el-select :disabled="createBy != currentData.createBy || currentData.status == 3"
            v-model="currentData.assignIdStr" placeholder="请选择" :multiple="true" style="width: calc(100% - 90px);">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId + ''">
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleEditPop">取 消</el-button>
        <el-button type="primary" @click="handleEditToolConfig">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryTaskList, addTask, updateTask, updateTaskChild, delTask, taskChildConversion } from "@/api/staging/task";
import { getAllUser, getKnowledgeList } from "@/api/staging/know";
import homeTool from "./components/homeTool";
import homeCopy from "./components/homeCopy";


export default {
  name: "Index",
  components: {
    homeTool,
    homeCopy
  },
  data() {
    return {
      currentIndex: 1,
      toolTotal: 0,
      copyTotal: 0,
      flowList: [
        { name: '报销', url: '../../fhoa/reimbursement/reimbursement_list.html' },
        { name: '采购', url: '../../fhoa/purchase/purchase_list.html' },
        { name: '转正', url: '../../fhoa/toformal/toformal_list.html' },
        { name: '招聘', url: '../../fhoa/recruit/recruit_list.html' },
        { name: '加班', url: '../../fhoa/overtime/overtime_list.html' },
        { name: '用车', url: '../../fhoa/usingcars/usingcars_list.html' },
        { name: '请假', url: '../../fhoa/myleave/myleave_list.html' },
        { name: '经费', url: '../../fhoa/funds/funds_list.html' },
        { name: '团建', url: '../../fhoa/tuanjian/tuanjian_list.html' }
      ],
      taskVal: '',
      taskList: [],
      currentData: {},
      taskItemCurrent: '',
      editTaskDate: '',
      textarea: '',
      priorityCurrent: 3, // 当前选中优先级
      priorityText: '无优先级', // 优先级提示文字
      priorityLevel: 4,
      taskDate: [], // 日期选择
      userList: [], // 人员列表
      user1: '', // 配合人
      user2: '', // 指派人
      dateCardShow: false, // 展示下拉弹框
      priorityCurrent: 3, // 当前选中优先级
      flagList: [ // 优先级列表
        { icon: 'el-icon-s-flag', color: '#e13e39', text: '高优先级', level: 1 },
        { icon: 'el-icon-s-flag', color: '#ffc817', text: '中优先级', level: 2 },
        { icon: 'el-icon-s-flag', color: '#4772fa', text: '低优先级', level: 3 },
        { icon: 'el-icon-s-flag', color: '#6f6f6f', text: '无优先级', level: 4 }
      ],
      flagShow: false,
      subTask: '',
      showTaskDetails: true,
      childTaskList: [],
      userList: [],
      showEditPop: false,
      knowList: [], // 知识库列表
      loading: false,	//加载状态
      allList: [],
      knowCreateBy: ''
    };
  },
  computed: {
    getBgColor() {
      return function (level) {
        return (
          this.flagList && this.flagList.length && this.flagList.filter(it => it.level == level)[0]?.color
        )
      }
    },
    // 优先级背景色
    getColor() {
      return function () {
        return (
          this.flagList && this.flagList.length && this.flagList.filter(it => it.level == this.priorityLevel)[0]?.color
        )
      }
    },
    // 优先级
    getLevelText() {
      return function (level) {
        return (
          this.flagList && this.flagList.length && this.flagList.filter(it => it.level == level)[0]?.text
        )
      }
    },
    getUserNameText() {
      return function () {
        return (
          this.userList && this.userList.length && this.userList.filter(it => it.userName == this.knowCreateBy)[0]?.nickName
        )
      }
    },
    createBy() {
      return this.$store.state.user.name
    }
  },
  beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.$refs.homeTool.getList();
        })
    },
  methods: {
    handleChangeTotal(val) {
      this.currentIndex = val;
    },
    getToolListTotal(val) {
      this.toolTotal = val;
    },
    getCopyListTotal(val) {
      this.copyTotal = val;
    },
    handleFinishChildTask(item) {
      let state = item.state == 3 ? 1 : 3
      let params = {
        id: item.id,
        state
      }
      updateTaskChild(params).then(response => {
        if (response.code == 200) {
          this.getTaskList()
          this.showTaskDetails = false
        } else {
          this.$modal.msgError("操作失败！");
        }
      });
    },
    handleshowChildDetails() {
      this.showTaskDetails = !this.showTaskDetails;
      let params = {
        id: this.currentData.id,
        assignIdStr: Array.isArray(this.currentData.assignIdStr) ? this.currentData.assignIdStr.join(',') : this.currentData.assignIdStr,
        mainTask: this.currentData.mainTask,
        details: this.textarea,
        subTask: '',
        startTime: this.currentData.startTime,
        endTime: this.currentData.endTime,
        teamUpIdStr: Array.isArray(this.currentData.teamUpIdStr) ? this.currentData.teamUpIdStr.join() : this.currentData.teamUpIdStr,
        priorityLevel: this.currentData.priorityLevel,
        parentId: 0
      }
      taskChildConversion(params).then(response => {
        if (response.code == 200) {
          this.getTaskList()
        } else {
          this.$modal.msgError("操作失败！");
        }
      });
    },
    flowClick(val) {
      // window.location.href = val.url
    },
    goKnowDetail(val) {
      if (val.isCanLook == '0') {
        this.knowCreateBy = val.createBy
        this.$modal.msgError(`无操作权限！如需查看请联系创建者[${this.getUserNameText() || 'admin'}]添加权限`);
        return false;
      }
      let editFlag;
      if (val.isCanEdit == '1') {
        editFlag = 'edit';
      } else if (val.isCanEdit == '0' && val.isCanLook == '1') {
        editFlag = 'read';
      }
      let params = { FID: val.id, editFlag };
      this.$router.push({ path: '/staging/knowDetails', query: params });
    },
    handleEditPop() {
      this.$nextTick(() => {
        let obj = this.allList.filter(it => it.id == this.currentData.id)[0]
        this.currentData = JSON.parse(JSON.stringify(obj))
        if (this.currentData.teamUpIdStr.length) {
          this.currentData.teamUpIdStr = Array.isArray(this.currentData.teamUpIdStr) ? this.currentData.teamUpIdStr : this.currentData.teamUpIdStr.split(',')
        } else {
          this.currentData.teamUpIdStr = ''
        }
        if (this.currentData.assignIdStr.length) {
          this.currentData.assignIdStr = Array.isArray(this.currentData.assignIdStr) ? this.currentData.assignIdStr : this.currentData.assignIdStr.split(',')
        } else {
          this.currentData.assignIdStr = ''
        }
        this.editTaskDate = this.currentData.startTime ? [this.currentData.startTime, this.currentData.endTime] : []
      })
      this.showEditPop = false
    },
    // 获取知识库列表
    getKnowList() {
      getKnowledgeList({}).then(response => {
        if (response.code == 200) {
          this.knowList = response.data
        }
      });
    },
    handleEditLevel(item, i) {
      if (this.currentData.createBy != this.createBy) {
        return false
      }
      this.flagShow = false
      let params = {
        id: this.currentData.id,
        priorityLevel: item.level,
        parentId: 0
      }
      this.updateTaskMain(params)
    },
    // 新增任务
    enterAddTask() {
      if (!this.taskVal) {
        return false
      }
      let params = {
        assignIdStr: this.user2.length ? this.user2.join() : '',
        mainTask: this.taskVal,
        details: '',
        startTime: this.taskDate.length ? this.taskDate[0] + ' 00:00:00' : null,
        endTime: this.taskDate.length ? this.taskDate[1] + ' 23:59:59' : null,
        teamUpIdStr: this.user1.length ? this.user1.join() : '',
        priorityLevel: this.priorityLevel,
        parentId: 0
      }
      addTask(params).then(response => {
        if (response.code == 200) {
          this.dateCardShow = false
          this.taskVal = ''
          this.getTaskList()
        } else {
          this.$modal.msgError("操作失败！");
        }
      });
    },
    // 确认
    handleConfirmBtn() {
      this.dateCardShow = false
    },
    // 切换优先级
    handleSelectPriority(val, i, flag) {
      if ((this.currentData.createBy != this.createBy) && flag == 'edit') {
        return false
      }
      if (flag == 'add') {
        this.priorityCurrent = i
        this.priorityText = val.text
        this.priorityLevel = val.level
      }
      if (flag == 'edit') {
        this.currentData.priorityLevel = val.level
      }
    },
    // 清除表单数据
    handleClearForm() {
      this.priorityCurrent = 3
      this.priorityText = '无优先级'
      this.priorityLevel = 4,
        this.user1 = ''
      this.user2 = ''
      this.taskDate = []
      this.dateCardShow = false
    },
    handleEditToolConfig() {
      let params = {
        id: this.currentData.id,
        priorityLevel: this.currentData.priorityLevel,
        assignIdStr: this.currentData.assignIdStr.length ? this.currentData.assignIdStr.join() : '',
        startTime: this.editTaskDate.length ? this.editTaskDate[0] + ' 00:00:00' : null,
        endTime: this.editTaskDate.length ? this.editTaskDate[1] + ' 23:59:59' : null,
        teamUpIdStr: this.currentData.teamUpIdStr.length ? this.currentData.teamUpIdStr.join() : '',
        parentId: 0
      }
      this.updateTaskMain(params)
      this.showEditPop = false
    },
    enterEditTaskLabel() {
      if (!this.currentData.mainTask) {
        return false
      }
      let params = {
        id: this.currentData.id,
        mainTask: this.currentData.mainTask,
        parentId: 0
      }
      this.updateTaskMain(params)
    },
    t(val, maxLength = 24) {
      let newStr = ''
      let valLength = val.length;
      let innerVal, nextVal;
      let countLen = 0
      let nextLen = 1
      for (let i = 0; i < valLength; i++) {
        innerVal = val.charAt(i);
        nextVal = i === valLength ? '' : val.charAt(i + 1)
        if (innerVal.indexOf("\n") > -1 || innerVal.indexOf("\r\n") > -1) {
          newStr += '\n'
          countLen = 0
          continue
        }
        if (innerVal.match(/[^\x00-\xff]/ig) != null) {//中文，或者全角符号
          countLen += 2
        } else {
          countLen += 1
        }
        if (nextVal.match(/[^\x00-\xff]/ig) != null) {//中文，或者全角符号
          nextLen = 2
        } else {
          nextLen = 1
        }

        if (countLen > maxLength || countLen === maxLength) {
          console.log('1')
          newStr += innerVal
          // newStr += '\n'
          // countLen = 0
        } else if (countLen + nextLen === maxLength) {
          console.log('2')
          newStr += innerVal
        } else if (countLen + nextLen > maxLength) {
          console.log('3')
          newStr += innerVal
          newStr += '\n'
          countLen = 0
        } else {
          console.log('4')
          newStr += innerVal
        }
      }

      return this.trimSpace(newStr.split('\n'))

    },
    trimSpace(array) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] == "" || array[i] == null || typeof (array[i]) == "undefined") {
          array.splice(i, 1);
          i = i - 1;
        }
      }
      return array;
    },
    handleSaveChildTask() {
      if (!this.textarea) {
        return false
      }
      let sourceValue = this.textarea
      let maxLength = 100 //可以通过with/font-size大概计算
      this.subTask = this.t(sourceValue, maxLength)
      let params = {
        id: this.currentData.id,
        assignIdStr: this.currentData.assignIdStr,
        mainTask: this.currentData.mainTask,
        details: this.textarea,
        subTask: this.subTask.join(),
        startTime: this.currentData.startTime,
        endTime: this.currentData.endTime,
        teamUpIdStr: this.currentData.teamUpIdStr,
        priorityLevel: this.currentData.priorityLevel,
        parentId: 0
      }
      this.updateTaskMain(params)
    },
    handleShowChildTaskList() {
      console.log(this.currentData)
      if (this.currentData.state == 3) {
        this.$modal.msgWarning("主任务未完成状态下才可编辑");
        return false;
      }
      if (!this.textarea) {
        return false;
      }
      this.showTaskDetails = false
      let sourceValue = this.textarea
      let maxLength = 100 //可以通过with/font-size大概计算
      this.subTask = this.t(sourceValue, maxLength)
      let params = {
        id: this.currentData.id,
        assignIdStr: Array.isArray(this.currentData.assignIdStr) ? this.currentData.assignIdStr.join(',') : this.currentData.assignIdStr,
        mainTask: this.currentData.mainTask,
        details: this.textarea,
        subTask: this.subTask.join(),
        startTime: this.currentData.startTime,
        endTime: this.currentData.endTime,
        teamUpIdStr: Array.isArray(this.currentData.teamUpIdStr) ? this.currentData.teamUpIdStr.join() : this.currentData.teamUpIdStr,
        priorityLevel: this.currentData.priorityLevel,
        parentId: 0
      }
      taskChildConversion(params).then(response => {
        if (response.code == 200) {
          this.getTaskList()
        } else {
          this.$modal.msgError("操作失败！");
        }
      });
    },
    handleClickTaskItem(item, index) {
      this.taskItemCurrent = item.id
      this.currentData = JSON.parse(JSON.stringify(item))
      if (this.currentData.teamUpIdStr.length) {
        this.currentData.teamUpIdStr = Array.isArray(this.currentData.teamUpIdStr) ? this.currentData.teamUpIdStr : this.currentData.teamUpIdStr.split(',')
      } else {
        this.currentData.teamUpIdStr = ''
      }
      if (this.currentData.assignIdStr.length) {
        this.currentData.assignIdStr = Array.isArray(this.currentData.assignIdStr) ? this.currentData.assignIdStr : this.currentData.assignIdStr.split(',')
      } else {
        this.currentData.assignIdStr = ''
      }
      this.editTaskDate = this.currentData.startTime ? [this.currentData.startTime, this.currentData.endTime] : []
      this.showTaskDetails = true
      this.textarea = item.details
    },
    handleDelTask(val) {
      this.$modal.confirm('确定要删除吗？').then(() => {
        this.loading = true;
        return delTask({ id: val.id });
      }).then((data) => {
        this.loading = false;
        if (data.code == 200) {
          this.getTaskList('del')
          this.$modal.msgSuccess("删除成功");
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    updateTaskMain(params) {
      updateTask(params).then(response => {
        if (response.code == 200) {
          this.getTaskList()
        } else {
          this.$modal.msgError("操作失败！");
        }
      });
    },
    editTaskState(id, state) {
      let params = {
        id: id,
        state
      }
      this.updateTaskMain(params)
    },
    getUserName(teamUpId) {
      let userId;
      if (teamUpId.length && !Array.isArray(teamUpId)) {
        userId = teamUpId.split(',')
      } else if (teamUpId.length && Array.isArray(teamUpId)) {
        userId = teamUpId
      } else {
        userId = []
      }
      return userId.map(it => {
        const user = this.userList.filter(user => user.userId == it)[0]
        return user.nickName
      }).join(',')
    },
    // 获取任务列表
    getTaskList(type = '') {
      this.loading = true;
      queryTaskList({}).then(data => {
        this.loading = false;
        if (data.code == 200) {
          let arr = data.data.length ? data.data.sort((a, b) => a.state - b.state) : []
          let newArr = arr.map(item => ({
            ...item,
            ratio: item.jobWorkSubList && item.jobWorkSubList.length ? item.jobWorkSubList.filter(it => it.state == 3).length / item.jobWorkSubList.length * 100 : 0,
            newStartTime: item.startTime ? item.startTime.slice(5).split(' ')[0] : '',
            newEtartTime: item.endTime ? item.endTime.slice(5).split(' ')[0] : '',
            teamUpNameStr: this.getUserName(item.teamUpIdStr),
            assignNameStr: this.getUserName(item.assignIdStr),
            createByName: this.userList.filter(it => it.userName == item.createBy)[0]?.nickName,
            checked: item.state == 3 ? true : false
          }))
          this.allList = newArr
          this.finishList = newArr.filter(it => it.state == 3)
          this.taskList = newArr.filter(it => it.state == 1 || it.state == 2)
          if ((data.data.length && JSON.stringify(this.currentData) === "{}") || (type == 'del' && data.data.length)) {
            this.currentData = JSON.parse(JSON.stringify(data.data[0]))
            if (this.currentData.jobWorkSubList && this.currentData.jobWorkSubList.length) {
              this.currentData.jobWorkSubList.forEach(item => {
                item.checked = item.state == 3 ? true : false
              });
            }

            this.editTaskDate = this.currentData.startTime ? [this.currentData.startTime, this.currentData.endTime] : []
            this.currentData.teamUpIdStr = this.currentData.teamUpIdStr.length ? this.currentData.teamUpIdStr.split(',') : ''
            this.currentData.assignIdStr = this.currentData.assignIdStr.length ? this.currentData.assignIdStr.split(',') : ''
            this.taskItemCurrent = this.currentData.id
            this.textarea = data.data[0].details
          } else if (data.data.length && JSON.stringify(this.currentData) != "{}") {
            this.currentData = data.data.filter(it => it.id == this.currentData.id)[0]
            if (this.currentData.jobWorkSubList && this.currentData.jobWorkSubList.length) {
              this.currentData.jobWorkSubList.forEach(item => {
                item.checked = item.state == 3 ? true : false
              });
            }
            this.currentData.teamUpIdStr = this.currentData.teamUpIdStr.length ? this.currentData.teamUpIdStr.split(',') : ''
            this.currentData.assignIdStr = this.currentData.assignIdStr.length ? this.currentData.assignIdStr.split(',') : ''
            this.editTaskDate = this.currentData.startTime ? [this.currentData.startTime, this.currentData.endTime] : []
            this.textarea = data.data.filter(it => it.id == this.currentData.id)[0].details
          } else if (!data.data.length) {
            this.currentData = {}
          }
        }
      });
    },
    // 获取人员列表
    getUserList() {
      getAllUser().then(response => {
        this.userList = response.data;
        this.getTaskList()

      });
    }
  },
  mounted() {
    this.getUserList()
    this.getKnowList()
  }
};
</script>

<style scoped lang="scss">
.badge-text {
  cursor: pointer;
}
.content {
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

::v-deep .el-card__header {
  padding: 13px 15px !important;
}

::v-deep .el-card__body {
  height: calc(100% - 0px);
}

.task-card {
  height: 100%;
}

.el-card {
  overflow: visible !important;
}

.box-card {
  height: 100%;
}

.tool-list {
  padding-right: 10px;
  height: calc(100% - 40px);
  overflow: auto;
}

.task-card {
  height: 100%;

  ::v-deep .el-input-group__append,
  ::v-deep .el-input-group__prepend {
    border: none !important;
  }

  .task-card-list {
    height: calc(100% - 78px);
    overflow: auto;
    padding-top: 16px;
    padding-bottom: 10px;

    .date {
      font-size: 12px;
    }

    .el-icon-delete {
      // display: none;
      padding-right: 5px;
      color: #757575;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 5px;
      border-radius: 8px;

      span {
        padding-left: 8px;
      }

      .task-name {
        font-size: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: inline-block;
        width: calc(100% - 50px);
      }
    }

    .item:hover {
      background-color: #f9f9f9;

      .el-icon-delete {
        // margin-right: 3px;
        display: block;
        cursor: pointer;
      }
    }

    .active {
      background-color: #e7ecfa;
    }
  }
}

.flow-path {
  .flow-path-item {
    width: 25%;
    float: left;
    display: flex;
    margin-bottom: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .flow-path-item-icon {
      cursor: pointer;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3e80f7;
      border-radius: 8px;

      .el-icon-s-order {
        color: #fff;
        font-size: 20px;
      }
    }

    .flow-path-item-label {
      padding: 6px 0;
      font-size: 15px;
      color: #5a5a5c;
    }
  }

  .flow-path-item-icon:hover {
    box-shadow: 0 0 15px 0 #9f9999;
  }
}

.card-system {
  .system-item {
    width: 25%;
    float: left;
    display: flex;
    margin-bottom: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .system-item-icon {
      cursor: pointer;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e8f1ff;
      border-radius: 8px;

      .el-icon-s-marketing {
        color: #527cfa;
        font-size: 22px;
      }
    }

    .system-item-label {
      padding: 6px 0;
      font-size: 15px;
      color: #5a5a5c;
    }
  }

  .system-item-icon:hover {
    box-shadow: 0 0 15px 0 #d1cece;
  }
}

.know-card-body {
  ::v-deep .el-card__body {
    height: calc(100% - 60px);
    padding: 10px 20px;
    overflow: auto;
  }
}

.card-know {
  // overflow: auto;
  height: calc(100% - 20px);

  .card-know-item {
    .label {
      padding: 0;
      margin: 0;
    }

    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 18px;

    .lf {
      height: 42px;
      width: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #7fe6aa;
      border-radius: 8px;
      margin-right: 10px;

      .el-icon-reading {
        color: #fff;
        font-size: 20px;
      }
    }

    .rt {
      width: calc(100% - 52px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title {
      display: flex;
      margin: 0;
      text-align: left;
      align-items: center;

      .text {
        display: inline-block;
        width: calc(100% - 80px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }

    .date {
      padding-top: 4px;
      color: #888;
      font-size: 13px;
    }
  }
}

.task-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: inline-block;
  margin-left: 6px;
  width: calc(100% - 50px);
}

.details-card-body {
  ::v-deep .el-card__body {
    padding: 10px;
  }
}

.date-card {
  color: #757575;
  padding: 23px 20px;
  right: 5%;
  background-color: #fff;
  border-radius: 5px;

  .cooperate {
    font-size: 15px;
    margin: 20px 0;
  }

  .label {
    width: 90px;
    padding: 0;
    margin-bottom: 0px;
  }

  .date-time {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    i {
      margin-right: 10px;
    }
  }

  .assign,
  .priority {
    font-size: 15px;
  }

  .user {
    display: flex;
    align-items: center;

    .label {
      display: inline-block;
    }

    .el-icon-user-solid,
    .el-icon-user,
    .el-icon-sort {
      margin-right: 10px;
    }

    .el-icon-s-flag {
      font-size: 18px;
      margin-right: 0px;
      // cursor: pointer;
    }

  }

  .btn {
    margin-top: 16px;
    width: 100%;
    padding-right: 0;
    text-align: end;
  }

  .priority {
    .active {
      border-radius: 5px;
      background-color: #f1f1f1;
    }

    .flag-bg {
      display: inline-block;
      padding: 3px 7px 2px 7px;
      margin-right: 10px;
      text-align: center;
      cursor: pointer;
    }

    em {
      font-style: normal;
      font-size: 12px;
      margin-left: 5px;
    }
  }
}

.rt-top {
  // display: flex;
  height: 30px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  text-align: right;
  padding: 4px 0;
  position: relative;

  .el-icon-s-flag {
    // cursor: pointer;
    font-size: 16px;
  }


  .flag-list {
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 0;
    z-index: 99;
    padding: 8px 6px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

    .flag-item {
      border-radius: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 6px 0 6px 10px;

      i {
        margin-right: 6px;
      }

      .flag-label {
        font-size: 12px;
        color: #383838;
      }
    }

    .flag-item:hover {
      background-color: #f1f1f1;
    }

    .flag-active {
      .flag-label {
        color: #6d8ef8;
      }

      color: #6d8ef8;

      .el-icon-check {
        margin-left: 15px;
      }
    }
  }
}

.rt-details {
  height: calc(100% - 78px);
    overflow: auto;
  ::v-deep .el-textarea__inner {
    border: none;
    padding: 0;
  }

  .rt-top-title {
    display: flex;
    justify-content: space-between;

    // align-items: center;
    ::v-deep .el-textarea__inner {
      overflow: hidden !important;
      color: #000;
    }

    i {
      cursor: pointer;
      font-size: 16px;
      margin-top: 3px;
      margin-left: 5px;
    }
  }

  .child-task-list {
    .child-task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 3px 0;

      .label {
        padding-left: 6px;
      }
    }
  }
}

.task-details {
  height: 90%;
  // overflow: hidden;
  // padding-top: 10px;
  ::v-deep .el-textarea__inner {
    color: #747373;
    overflow: hidden;
  }
}

.add-input ::v-deep .el-input__inner {
  background-color: #f3f4f7 !important;
  border: none !important;
}
</style>
